<template>
  <div class="articleDetailPage">
    <div class="fixedBox headerBox">
      <van-nav-bar
      v-if="detailData.type"
        :title="detailData.type.name"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <img :src="detailData.img" alt="" class="banner pageContentPaddingT">
    <div class="coment">
      <div class="title">{{detailData.name}}</div>
      <div class="time">发布：{{detailData.time}}</div>
      <div class="com_box" v-html="detailData.content"></div>
      <p class="brand">
        <img src="@/assets/img/logo.png" alt="">
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      detailData: {}
    };
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getArticleDatel()
    }
  },
  methods: {
    async getArticleDatel() {
      let res = await this.$http.getArticle({
        id: this.id
      })
      if (res) {
        console.log(res)
        this.detailData = res.data
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style>
.com_box img{
  max-width: 100%
}
</style>
<style scoped>
.articleDetailPage {
  background: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}
.banner{
  width: 100%;
  height: 4.18rem;
  box-sizing: content-box;
}
.coment{
  padding: .2rem .28rem;
}
.title{
  font-size: .36rem;
  font-weight: 600;
  color: #000000;
  margin-bottom: .08rem;
}
.time{
  font-size: .26rem;
  color: #999999;
  margin-bottom: .24rem;
}
.com_box img{
  width: 100%;
}
.fixedBox{
  position: fixed;
  width: 100%;
  z-index: 1;
}
.brand{
  text-align: center;
  margin: 0.56rem 0;
}
.brand img{
  width: 0.88rem;
  height: 0.88rem;
}
</style>
